<template>
  <div>
     <table>
       <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>数量</th>
            <th>价格</th>
            <th>小计</th>
          </tr>
       </thead>
       <tbody>
          <tr v-for="item in shopcartList" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>
              <button @click="item.count--">-</button>
              {{item.count }}
              <button @click="item.count++">+</button>
            </td>
            <td>{{ item.price }}</td>
            <td>{{ (item.count*item.price).toFixed(2) }}</td>
          </tr>
       </tbody>
      </table>
  </div> 
</template>

<script lang='ts' setup>
 import {reactive} from 'vue'
 interface ShopCartItem{
  id:string
  name:string
  count:number
  price:number
 }
 const shopcartList=reactive<Array<ShopCartItem>>([
  {
    id:'1001',
    name:'洽洽瓜子',
    count:2,
    price:5.6
  },
  {
    id:'1002',
    name:'威化饼干',
    count:1,
    price:15.6
  },
  {
    id:'1003',
    name:'张飞牛肉干',
    count:3,
    price:35.6
  }
 ])


</script>

<style lang='scss' scoped>
</style>